<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>半圆跑道永动机</title>
	<style type="text/css">
		*{
			padding:0;
			margin: 0;
		}
		body{
			display:flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #1c1f2f;
		}
		.container{
/*			加入倒影*/
			-webkit-box-reflect:below 5px -webkit-linear-gradient(transparent 10%,rgba(0,0,0,0.5));
		}
		.loader{
			position:relative;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			border: 20px solid transparent;
/*			定义下边和右边的颜色*/
			border-bottom-color: aqua;
			border-right-color: aqua;
			transform: rotate(45deg);
/*			ease-in-out是两头慢，中间快 alternate是反向运行动画*/
			animation: move 4s ease-in-out infinite alternate;
		}
		.ball{
			position:absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			animation: move-reverse 4s ease-in-out infinite alternate;
		}
		.ball::before{
			content:"";
			position: absolute;
			bottom: 25px;
			left: 25px;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background: #fff;
		}
/*		定义两个动画*/
		@keyframes move{
			0%{transform:rotate(0)}
			100%{transform:rotate(90deg)}
		}
		@keyframes move-reverse{
			0%{transform:rotate(0)}
			100%{transform:rotate(-180deg)}
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="loader">
			<div class="ball"></div>
		</div>
	</div>
</body>
</html>
